<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div class="taskInfo">
						<el-form ref="form" :model="order" label-width="150px">
							<div class="taskInfo">
								<el-row>
									<el-col :span="11">
										<el-form-item label="订单编号：">
											<span>{{order.id}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="创建时间：">
											<span>{{dateFormat(order.createTime)}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="11">
										<el-form-item label="商品编号：">
											<span>{{order.businessId}}</span>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="商品名称：">
											<span>{{order.wareName}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
                  <el-col :span="11">
                    <el-form-item label="用户编号：">
                      <span>{{order.userId}}</span>
                    </el-form-item>
                  </el-col>
									<el-col :span="11">
										<el-form-item label="订单金额：">
											<span>{{order.orderPrice}}糖果币</span>
										</el-form-item>
									</el-col>
								</el-row>

							</div>

							<div class="taskInfo" >
								<el-row>
									<el-col :span="11">
										<el-form-item label="商品类型：">
											<span>红包商品</span>
										</el-form-item>
									</el-col>
                  <el-col :span="11">
                    <el-form-item label="付款成功时间：">
                      <span>{{dateFormat(order.sendTime)}}</span>
                    </el-form-item>
                  </el-col>
								</el-row>

								<el-row>
                  <el-col :span="11">
                    <el-form-item label="微信商户单号：">
                      <span>{{order.partnerTradeNo}}</span>
                    </el-form-item>
                  </el-col>
									<el-col :span="11">
										<el-form-item label="微信付款单号：">
											<span>{{order.paymentNo}}</span>
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="22">
										<el-form-item label="发货状态：">
											<span v-if="order.orderStatus==1">未发货</span>
											<span v-if="order.orderStatus==2">已发货</span>
											<span v-if="order.orderStatus==3">已收货</span>
											<span v-if="order.orderStatus==4"><el-tag type="danger">订单已取消</el-tag></span>
										</el-form-item>
									</el-col>
								</el-row>
							</div>

							<el-form-item>
								<el-button @click="reback()">返回</el-button>
							</el-form-item>
						</el-form>
					</div>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../../Navigation'
	import BreadCrumb from '../../BreadCrumb'
import { setTimeout } from 'timers';
	export default{
		name:'OrderRedPackDetail',
		methods: {
			dateFormat(time) {
				if(time==null){
					return null;
				}
				var date=new Date(time);
				var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				* */
				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
			},
			reback(){
				this.$router.push('/order/redpack');
			}
		},
		mounted(){
			var that = this;
			this.$api.get('/red/get/'+that.$route.params.id,null,function(data){
				if(data.flag=="success"){
					that.order = data.data;
					console.log(data.data)
				} else{
					that.$message.error(data.msg);
				}
			});
		},
		data:function(){
			return {
				dialog1:false,
				dialog2:false,
				navs:["订单管理","兑换商城订单","红包订单详情"],
				order:{}
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
	.rightButton{
		text-align: right;
		margin-bottom: 10px;
	}
</style>
